<template>
    <div class="content">
        <el-row class="title_block hpx-title-border">
            <el-col :span="16">
                <el-row class="block_title">汇票豆账户</el-row>
                <el-row><i class="iconfont icon-yue1"></i><span class="hpx-label balance"> 
                    平台汇票豆账户可用余额</span> <span class="hpx-red-tips">{{account.availableBalance}}个</span>
                </el-row>
            </el-col>
            <el-col :span="8" class="recharge">
                <el-button type="primary" round size="medium" @click="recharge()">充 值</el-button>
            </el-col>
        </el-row>
        <el-row class="table_title">
            <el-col :span="14">
                <span class="block_title">收支列表</span>
                <el-date-picker
                    class="filter_condition"
                    v-model="form.time_interval"
                    type="daterange"
                    unlink-panels
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small"
                    format="yyyy-MM-dd"
                    :default-time="['00:00:00', '23:59:59']"
                    @change="changeDate">
                </el-date-picker>
                <el-select v-model="form.selectOpt" class="filter_condition" size="small" @click="changeType()">
                    <el-option
                        v-for="item in selectOptions"
                        :key="item.key"
                        :label="item.label"
                        :value="item.key">
                    </el-option>
                </el-select>
                <el-button type="primary" size="small" @click="filter()">筛选</el-button>
            </el-col>
            <el-col :span="10" class="top_btn">
                <el-button plain type="primary" size="small" @click="exportTable()">
                    <i class="iconfont icon-daochu1"></i>导出Excel表格
                </el-button>
            </el-col>
        </el-row>
        <Table :tableData="tableData" :operation='false' @change="changePage" @changes="changeSize" :tableName="'draftBeans'"/>
        <DialogInput ref="remin" title="平台汇票豆线下充值帐户信息">
            <div class="rem-dialog-con text_left">
                <el-row><span class="hpx-label">充值方式：</span><span class="rechargetype">线下充值</span></el-row>
                <el-row><span class="hpx-red-tips">(注：请以户名为“{{account.enterpriseName}}”的对公户转账，非对应账户请备注！)</span></el-row>
                <div id="copyed">
                    <el-row><span class="hpx-label">户名：</span>上海票趣信息科技有限公司</el-row>
                    <el-row><span class="hpx-label">账号：</span>216420100100074046</el-row>
                    <el-row><span class="hpx-label">开户行：</span>兴业银行市北支行</el-row>
                    <el-row><span class="hpx-label">行号：</span>309290000414</el-row>
                </div>
            </div>
            <el-row class="text_center">
                <el-button type="primary" size="medium" class="btn" 
                    v-clipboard:copy="bankInfo"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError">
                    复制账户信息
                </el-button>
            </el-row>
            <span slot="Remfooter" class="dialog-footer">
                <div><i class="iconfont icon-tixing hpx-red-tips"></i> <span class="block_title">温馨提示:</span></div>
                <div class="hpx-label">
                    目前只提供线下充值，您需先汇款到汇票线的对公账户充值，成功后 请将截图发客服，客服人员会在12小时内完成复核充值到您的账户； 汇票豆不支持提现；有疑问请致电 
                    <span class="hpx-red-tips">021-68810661-808</span>。
                </div>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    import Table from '@component/common/HpxTable.vue' 
    import DialogInput from '@component/common/DialogInput.vue'  
    import moment from 'moment' 
    import { hideStr, toTimeFormat } from '@/util/format'
    import Clipboard from 'clipboard'
    import { mapGetters, mapState } from 'vuex'
import { log } from 'util';
    @Component({
        components:{
            Table,
            DialogInput
        },
        computed:{
            ...mapState([
                'userInfo'
            ])
        }
    })
    export default class DraftBeans extends Vue {
    //data
        account:any = {}
        form = {
            time_interval: [],
            selectOpt: ''
        }
        selectOptions = [{
                label: '全部',
                key: ''
            },{
                label: '收入',
                key: '1'
            },{
                label: '支出',
                key: '2'
        }]
        tableData:TableData = {
            header:[
                {
                    label: '订单号',
                    key: 'businessId',
                    formatter: row => row.businessId ? row.businessId : '--'
                },
                {
                    label: '时间',
                    key: 'createTime',
                    formatter: row => moment(row.createTime).format('YYYY-MM-DD HH:mm')
                },
                {
                    label: '备注',
                    key: 'remark'
                },
                {
                    label: '收入(个)',
                    key: 'income',
                    formatter: row => row.income == 0 ? '--' : '+' + row.income
                },
                {
                    label: '支出(个)',
                    key: 'expenditure',
                    formatter: row => row.expenditure == 0 ? '--' : '-' + row.expenditure
                },
                {
                    label: '汇票豆余额(个)',
                    key: 'availableBalance'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            }
        }
        bankInfo: string = '户名：上海票趣信息科技有限公司'+
                            '账号：216420100100074046'+
                            '开户行：兴业银行市北支行'+
                            '行号：309290000414';
    //methods

        //查询企业汇票豆账户
        async getAccount () {
            let res = await this.$http.get(`draftbean/account/${this.userInfo.enterprise_id}`)
            if(res.status == 200){
                this.account = res.data
            }
        }
        //查询汇票豆收支记录
        async getRecord () {
            let params = {
                enterpriseId: this.userInfo.enterprise_id,
                budget: this.form.selectOpt,
                startTime: this.form.time_interval ? toTimeFormat(this.form.time_interval[0],'yyyy-MM-dd') : '',
                endTime: this.form.time_interval ? toTimeFormat(this.form.time_interval[1],'yyyy-MM-dd') : '',
                currentPage: this.tableData.footer.currentPage,
                pageSize: this.tableData.footer.pageSize
            }
            let res = await this.$http.post('draftbean/account/budgetdetail',params)
            if(res.status == 200){
                this.tableData.body = res.data.items
                this.tableData.footer.total = res.data.totalNum
                this.tableData.footer.pageSize = res.data.pageSize
                this.tableData.footer.currentPage = res.data.currentPage
            }
        }
        changeDate () {
            if(!this.form.time_interval){
                this.getRecord()
            }
        }
        //筛选
        filter () {
            this.getRecord()
        }
        changeType () {
            this.getRecord()
        }
        //充值弹框
        recharge () {
            this.$refs['remin'].openDialog()
        }
        //复制
        onCopy () {
            this.$alert('成功复制到剪贴板','提示',{
                confirmButtonText: '确定',
                customClass: 'custom-message-box',
                callback: action => {
                    this.$refs['remin'].closeDialog()
                }
            })
        }
        onError () {
            this.$alert('复制失败','提示',{
                confirmButtonText: '确定',
                customClass: 'custom-message-box'
            })
        }
        //导出
        exportTable () {
            let url = `${location.origin}/gateway/draftbean/account/export`
            let startTime = this.form.time_interval ? toTimeFormat(this.form.time_interval[0],'yyyy-MM-dd') : ''
            let endTime = this.form.time_interval ? toTimeFormat(this.form.time_interval[1],'yyyy-MM-dd') : ''
            window.open(url+"?enterpriseId="+this.userInfo.enterprise_id+"&budget="+this.form.selectOpt+"&startTime="+startTime+"&endTime="+endTime+"&Authorization="+localStorage.getItem('Authorization'))
        }
        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getRecord()
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getRecord()  
        }
        mounted () {
            this.getAccount()
            this.getRecord()
        }
    }
</script>

<style lang="scss" scoped>
    .title_block{
        padding: 20px 60px; 
        .hpx-red-tips{
            font-size: 20px;
        }
        .balance{
            font-size: 14px;
        }
        .recharge{
            margin-top: 12px;
            .el-button{
                width: 98px;
                box-shadow: 2px 2px 10px 0px $__color-primary;
            }
        }
    }
    .rechargetype{
        font-weight: 600;
    }
    .block_title{
        @extend .hpx-label;
        @extend .hpx-font-weight;
        font-size: 18px;
        margin-bottom: 20px;
        margin-right: 12px;
    }
    .table_title{
        line-height: 45px;
        border-bottom: 1px solid $__color-primary;
        margin-top: 22px;
        .filter_condition{
            margin-right: 12px;
        }
        .filter_condition.el-select{
            width: 72px;
        }
    }
    .top_btn{
        display: flex;
        justify-content: flex-end;
        position: relative;
    }
    .rem-dialog-con.text_left{
        color: $__color-show;
        font-size: 14px;
        .el-row{
            line-height: 32px;
        }
    }
    .text_center{
        text-align: center;
    }
    .dialog-footer{
        div:first-child{
            width: 100px;
            float: left;
            text-align: left;
        }
        div:nth-child(2){
            width: 420px;
            float: left;
            font-size: 14px;
            text-align: left;
            line-height: 20px;
        }
    }  
</style>
<style lang="scss">
    .table_title{
        .filter_condition.el-select{
            .el-input__inner{
                padding: 0 12px;
                background: $__color-bg-unimportance !important;
                color: $__color-primary !important;
                border: 1px solid $__color-primary !important;
            }
        }
    }
</style>
